<template>
    <div class="home">
        <section class="wraper-page">
            <div class="header">
                <div class="header-bg"></div>
                <div class="header-icon">
                    <img src="../assets/imgs/nav_bar_menu@2x.png" alt="" class="btn-slide-bar">
                    <img src="../assets/imgs/nav_bar_report@2x.png" alt="">
                </div>
                <div class="header-title">雪山景区旅游大数据</div>
            </div>
            <div class="content">
                <div class="content-wraper">
                    <div class="content-box"></div>
                    <div class="content-box"></div>
                    <div class="content-box"></div>
                    <div class="content-box"></div>
                </div>

            </div>
        </section>
        <section class="slide-bar">
            <ul>
                <li>首页</li>
                <li>菜单导航</li>
                <li>jQuery特效</li>
                <li>CSS3特效</li>
                <li>tab标签</li>
            </ul>
        </section>
    </div>
</template>

<script>
    import {Notify} from 'vant';
    export default {
        name: "index",
        components: {
            [Notify.name]: Notify
        },
        data() {
            return {
                allCount: {}
            }
        },
        mounted() {
            this.getALLData(['crowdCount']);
            var _btn  = document.querySelector(".btn-slide-bar"),
                _home = document.querySelector(".home");
            _btn.onclick = function(){
                _home.classList.toggle("active");
            }
        },
        methods:{
            getALLData(arg) {
                this.$http.get('dddd?tr_id=53',{
                    params: {
                        "@action": arg.join(','),
                        'date': '20190412'
                    }
                })
                    .then((result)=>{
                        this.allCount = result.data.crowdCount;
                    })
                    .catch((err) => {
                        Notify({
                            message: err.data.msg || "数据异常，请重试",
                            duration: 1000,
                            background: '#ff0000'
                        })
                    })
            }
        }
    }
</script>
<style lang="less">
    .home{
        /*width: 100%;*/
        margin-left: -0.01rem;
        /*margin-right: -0.01rem;*/
        transition: all 0.2s ease-in-out;
        position: relative;
        /*padding-bottom: 0.4rem;*/
        .header{
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 2.67rem;
            padding: 0 0.16rem;
            background:linear-gradient(135deg,rgba(114,153,255,1) 0%,rgba(19,84,252,1) 100%);
            .header-bg{
                position: absolute;
                right: 0rem;
                top: 0rem;
                width:2.18rem;
                height:2.02rem;
                background-image: url("../assets/imgs/menu_page_shading@2x.png");
                transform: rotate(45deg);
                -webkit-background-size: 100% 100%;
                background-size: 100% 100%;
            }
            .header-icon{
                display: flex;
                justify-content: space-between;
                padding-top: 0.16rem;
                img{
                    width: 0.18rem;
                    height: 0.18rem;
                    color: rgba(255,255,255,0.7);
                }
            }
            .header-title{
                font-size:0.28rem;
                font-weight:600;
                color:rgba(255,255,255,1);
                line-height:0.28rem;
                padding: 0.24rem 0;
            }
        }
        .content{
            margin-right: -0.01rem;
            .content-wraper{
                position: relative;
                width:3.43rem;
                margin: -0.55rem auto 0;
                .content-box{
                    width:100%;
                    height:1.1rem;
                    background:rgba(255,255,255,1);
                    /*box-shadow:0px 16px 40px 0px rgba(119,136,175,0.2);*/
                    border-radius:0.06rem;
                    margin-bottom: 0.14rem;
                }
            }

        }

    }
</style>
<style scoped>
    .active{
        transform: translate3d(1.5rem,0,0);
        transition: all 0.2s ease-in-out;
    }
    .slide-bar{
        position: fixed;
        top: 0px;
        bottom: 0px;
        background-color: rgba(39, 40, 50, 1);
        width: 1.5rem;
        height: 100%;
        z-index: 1;
        transform: translate3d(-1.5rem,0,0);
        transition: all 0.2s ease-in-out;
    }
    .slide-bar li{
        padding-left: 0.1rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: left;
        color: #fff;
        border-bottom: 1px solid #222;
    }

</style>